<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			*{
				margin:0;
				padding: 0;
			}
			.xuan{
				width:500px;
				height:500px;
				border:1px solid #ccc;
			}
			.list{
				width:100%;
				height:660px;
				background: #000;
				color:#fff;
			}
			.list p{
				float: left;
				width:33.3%;
				height:40px;
				text-align: center;
				line-height: 40px;
			}
			ul{
				width:100%;
				height:440px;
				background: #000;
				font-size: 20px;
				color:#fff;
				margin-top:100px;
			}
			 ul{
				display: none;
			}
			.active{
				background: #fff;
				color:#000;
			}
		</style>
	</head>

	<body>
		<div class="xuan">
			<div class="list">
				<p>第一页</p>
				<p>第二页</p>
				<p>第三页</p><br />
				<ul style="display: block;">
					<li>网页特效原理分析</li>
					<li>响应用户操作</li>
					<li>提示框效果</li>
					<li>事件驱动</li>
					<li>元素属性操作</li>
					<li>动手编写第一个JS特效</li>
					<li>引入函数</li>
					<li>网页换肤效果</li>
					<li>展开/收缩播放列表效果</li>
				</ul>
				<ul>
					<li>改变网页背景颜色</li>
					<li>函数传参</li>
					<li>高重用性函数的编写</li>
					<li>126邮箱全选效果</li>
					<li>循环及遍历操作</li>
					<li>调试器的简单使用</li>
					<li>典型循环的构成</li>
					<li>for循环配合if判断</li>
					<li>className的使用</li>
					<li>innerHTML的使用</li>
					<li>戛纳印象效果</li>
					<li>数组</li>
					<li>字符串连接</li>

				</ul>
				<ul>
					<li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li>
					<li>JavaScript出现的位置、优缺点</li>
					<li>变量、类型、typeof、数据类型转换、变量作用域</li>
					<li>闭包：什么是闭包、简单应用、闭包缺点</li>
					<li>运算符：算术、赋值、关系、逻辑、其他运算符</li>
					<li>程序流程控制：判断、循环、跳出</li>
					<li>命名规范：命名规范及必要性、匈牙利命名法</li>
					<li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li>
					<li>定时器的使用：setInterval、s</li>			
				</ul>
			</div>
			
				
			
		</div>
	</body>
<script>
	var ul = document.getElementsByTagName("ul")
	var div = document.getElementsByTagName("p")
		for(var i=0; i<div.length; i++){
			div[i].index=i
			div[i].onmousemove=function(){
				for(var i=0; i<div.length; i++){
					ul[i].style.display="none"
					div[i].className=""
				}
				ul[this.index].style.display="block"
				this.className="active"
			}
		}
</script>
</html>
